<template>
  <div class="timestamp-converter-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="page-title">
        <div class="title-with-back">
          <el-button 
            type="primary" 
            :icon="ArrowLeft" 
            @click="$router.push('/tools')"
            class="blue-return-button"
            circle
          />
          <div class="title-content">
            <div class="title-main">
              <el-icon class="title-icon"><Clock /></el-icon>
              <h2>时间戳转换</h2>
            </div>
            <p class="page-description">
              <el-icon><Document /></el-icon>
              <span>Unix时间戳与日期时间格式相互转换工具，支持单个转换、批量转换、多时区转换</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 当前时间戳显示 -->
    <el-card class="current-timestamp-card">
      <div class="current-timestamp-section">
        <div class="timestamp-label">当前时间戳</div>
        <div class="timestamp-display">
          <span class="timestamp-value">{{ displayCurrentTimestamp }}</span>
          <span class="timestamp-unit">{{ currentTimestampUnit === 'ms' ? '毫秒' : '秒' }}</span>
          <el-button @click="toggleTimestampUnit" :icon="Refresh">切换单位</el-button>
          <el-button type="success" @click="copyCurrentTimestamp" :icon="DocumentCopy">复制</el-button>
          <el-button :type="isTimerRunning ? 'danger' : 'success'" @click="toggleTimer" :icon="isTimerRunning ? VideoPause : VideoPlay">
            {{ isTimerRunning ? '停止' : '开始' }}
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 转换区域 -->
    <el-card class="converter-card">
      <!-- 时间戳转日期 -->
      <div class="converter-section">
        <div class="section-title">
          <el-icon><Clock /></el-icon>
          时间戳转日期时间
        </div>
        <div class="converter-row">
          <el-input 
            v-model="timestampToDate.input"
            placeholder="输入时间戳"
            style="width: 200px"
            clearable
          />
          <el-select v-model="timestampToDate.unit" style="width: 100px">
            <el-option label="毫秒" value="ms" />
            <el-option label="秒" value="s" />
          </el-select>
          <el-button type="primary" @click="convertTimestampToDate">转换</el-button>
          <el-input
            v-model="timestampToDate.result"
            placeholder="转换结果"
            readonly
            style="width: 300px"
          />
          <el-button type="success" @click="copyToClipboard(timestampToDate.result)" :icon="DocumentCopy" title="复制">复制</el-button>
          <el-button type="danger" @click="clearTimestampToDate" :icon="Delete" title="清空">清空</el-button>
          <el-select v-model="timestampToDate.timezone" style="width: 200px">
            <el-option label="Asia/Shanghai" value="Asia/Shanghai" />
            <el-option label="UTC" value="UTC" />
            <el-option label="America/New_York" value="America/New_York" />
            <el-option label="Europe/London" value="Europe/London" />
            <el-option label="Asia/Tokyo" value="Asia/Tokyo" />
          </el-select>
        </div>
      </div>

      <!-- 日期转时间戳 -->
      <div class="converter-section">
        <div class="section-title">
          <el-icon><Calendar /></el-icon>
          日期时间转时间戳
        </div>
        <div class="converter-row">
          <el-input
            v-model="dateToTimestamp.datetime"
            placeholder="YYYY-MM-DD HH:mm:ss"
            style="width: 220px"
            clearable
          />
          <el-select v-model="dateToTimestamp.timezone" style="width: 200px">
            <el-option label="Asia/Shanghai" value="Asia/Shanghai" />
            <el-option label="UTC" value="UTC" />
            <el-option label="America/New_York" value="America/New_York" />
            <el-option label="Europe/London" value="Europe/London" />
            <el-option label="Asia/Tokyo" value="Asia/Tokyo" />
          </el-select>
          <el-button type="primary" @click="convertDateToTimestamp">转换</el-button>
          <el-input
            v-model="dateToTimestamp.result"
            placeholder="转换结果"
            readonly
            style="width: 300px"
          />
          <el-button type="success" @click="copyToClipboard(dateToTimestamp.result)" :icon="DocumentCopy" title="复制">复制</el-button>
          <el-button type="danger" @click="clearDateToTimestamp" :icon="Delete" title="清空">清空</el-button>
          <el-select v-model="dateToTimestamp.outputUnit" style="width: 100px">
            <el-option label="毫秒" value="ms" />
            <el-option label="秒" value="s" />
          </el-select>
        </div>
      </div>

      <!-- 快捷选择 -->
      <div class="converter-section">
        <div class="section-title">
          <el-icon><Timer /></el-icon>
          快捷选择
        </div>
        <div class="quick-select-buttons">
          <el-button size="small" @click="showQuickTimeDialog('30m')">半小时前</el-button>
          <el-button size="small" @click="showQuickTimeDialog('1h')">1小时前</el-button>
          <el-button size="small" @click="showQuickTimeDialog('6h')">6小时前</el-button>
          <el-button size="small" @click="showQuickTimeDialog('12h')">12小时前</el-button>
          <el-button size="small" @click="showQuickTimeDialog('1d')">1天前</el-button>
          <el-button size="small" @click="showQuickTimeDialog('3d')">3天前</el-button>
        </div>
      </div>
    </el-card>

    <!-- 批量转换区域 -->
    <div class="batch-converters-container">
      <!-- 批量时间戳转日期时间 -->
      <el-card class="converter-card batch-converter-card">
        <div class="converter-section">
          <div class="section-title">
            <el-icon><Clock /></el-icon>
            批量时间戳转日期时间
          </div>
          <div class="batch-converter-content">
            <div class="batch-input-section">
              <div class="batch-label">时间戳列表（支持换行或逗号分隔）</div>
              <el-input
                v-model="batchTimestampToDate.input"
                type="textarea"
                :rows="6"
                placeholder="支持三种格式：&#10;1. 每行一个&#10;2. 逗号分隔&#10;3. 混合使用"
              />
            </div>
            <div class="batch-controls">
              <el-button type="primary" @click="batchConvertTimestampToDate">转换</el-button>
              <el-select v-model="batchTimestampToDate.timezone" style="width: 200px">
                <el-option label="Asia/Shanghai" value="Asia/Shanghai" />
                <el-option label="UTC" value="UTC" />
                <el-option label="America/New_York" value="America/New_York" />
                <el-option label="Europe/London" value="Europe/London" />
                <el-option label="Asia/Tokyo" value="Asia/Tokyo" />
              </el-select>
              <el-select v-model="batchTimestampToDate.unit" style="width: 100px">
                <el-option label="毫秒" value="ms" />
                <el-option label="秒" value="s" />
              </el-select>
            </div>
            <div class="batch-result-section">
              <div class="batch-result-header">
                <div class="batch-label">转换结果</div>
                <div class="batch-result-actions" v-if="batchTimestampToDate.results.length > 0">
                  <el-button size="small" @click="copyBatchResults(batchTimestampToDate.results, 'output')" :icon="DocumentCopy">
                    复制结果
                  </el-button>
                  <el-button size="small" @click="copyBatchResults(batchTimestampToDate.results, 'both')" :icon="DocumentCopy">
                    复制全部
                  </el-button>
                </div>
              </div>
              <el-table :data="batchTimestampToDate.results" border stripe max-height="300">
                <el-table-column prop="input" label="输入" width="180">
                  <template #default="{ row }">
                    <div class="table-cell-clickable" @click="copyToClipboard(row.input)" :title="'点击复制: ' + row.input">
                      {{ row.input }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="output" label="输出" min-width="200">
                  <template #default="{ row }">
                    <div class="table-cell-clickable" @click="copyToClipboard(row.output)" :title="'点击复制: ' + row.output">
                      {{ row.output }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 批量日期时间转时间戳 -->
      <el-card class="converter-card batch-converter-card">
        <div class="converter-section">
          <div class="section-title">
            <el-icon><Calendar /></el-icon>
            批量日期时间转时间戳
          </div>
          <div class="batch-converter-content">
            <div class="batch-input-section">
              <div class="batch-label">日期时间列表（支持换行或逗号分隔）</div>
              <el-input
                v-model="batchDateToTimestamp.input"
                type="textarea"
                :rows="6"
                placeholder="支持三种格式：&#10;1. 每行一个&#10;2. 逗号分隔&#10;3. 混合使用"
              />
            </div>
            <div class="batch-controls">
              <el-button type="primary" @click="batchConvertDateToTimestamp">转换</el-button>
              <el-select v-model="batchDateToTimestamp.timezone" style="width: 200px">
                <el-option label="Asia/Shanghai" value="Asia/Shanghai" />
                <el-option label="UTC" value="UTC" />
                <el-option label="America/New_York" value="America/New_York" />
                <el-option label="Europe/London" value="Europe/London" />
                <el-option label="Asia/Tokyo" value="Asia/Tokyo" />
              </el-select>
              <el-select v-model="batchDateToTimestamp.outputUnit" style="width: 100px">
                <el-option label="秒" value="s" />
                <el-option label="毫秒" value="ms" />
              </el-select>
            </div>
            <div class="batch-result-section">
              <div class="batch-result-header">
                <div class="batch-label">转换结果</div>
                <div class="batch-result-actions" v-if="batchDateToTimestamp.results.length > 0">
                  <el-button size="small" @click="copyBatchResults(batchDateToTimestamp.results, 'output')" :icon="DocumentCopy">
                    复制结果
                  </el-button>
                  <el-button size="small" @click="copyBatchResults(batchDateToTimestamp.results, 'both')" :icon="DocumentCopy">
                    复制全部
                  </el-button>
                </div>
              </div>
              <el-table :data="batchDateToTimestamp.results" border stripe max-height="300">
                <el-table-column prop="input" label="输入" min-width="200">
                  <template #default="{ row }">
                    <div class="table-cell-clickable" @click="copyToClipboard(row.input)" :title="'点击复制: ' + row.input">
                      {{ row.input }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="output" label="输出" width="180">
                  <template #default="{ row }">
                    <div class="table-cell-clickable" @click="copyToClipboard(row.output)" :title="'点击复制: ' + row.output">
                      {{ row.output }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 快捷时间选择对话框 -->
    <el-dialog v-model="showQuickDialog" title="选择时间类型" width="400px">
      <div style="text-align: center; margin: 20px 0;">
        <p style="margin-bottom: 20px; color: #606266;">请选择返回时间的类型</p>
        <el-button type="primary" size="large" @click="confirmQuickTime('exact')" style="width: 120px; margin: 0 10px;">
          当前时间
        </el-button>
        <el-button type="success" size="large" @click="confirmQuickTime('hour')" style="width: 120px; margin: 0 10px;">
          整点时间
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, Clock, Calendar, DocumentCopy, Timer, Delete, Refresh, VideoPause, VideoPlay, Document
} from '@element-plus/icons-vue'
import { copyToClipboard as copyText } from '@/utils/clipboard'

// 当前时间戳
const currentTimestamp = ref(Date.now())
const currentTimestampUnit = ref('ms') // 'ms' 或 's'
const isTimerRunning = ref(true)
let timer = null

// 快捷时间选择对话框
const showQuickDialog = ref(false)
const pendingQuickType = ref('')

const displayCurrentTimestamp = computed(() => {
  if (currentTimestampUnit.value === 'ms') {
    return currentTimestamp.value
  } else {
    return Math.floor(currentTimestamp.value / 1000)
  }
})

// 时间戳转日期
const timestampToDate = ref({
  input: '',
  unit: 'ms',
  timezone: 'Asia/Shanghai',
  result: ''
})

// 日期转时间戳
const dateToTimestamp = ref({
  datetime: '',
  timezone: 'Asia/Shanghai',
  outputUnit: 'ms',
  result: ''
})

// 批量时间戳转日期
const batchTimestampToDate = ref({
  input: '',
  timezone: 'Asia/Shanghai',
  unit: 'ms',
  results: []
})

// 批量日期转时间戳
const batchDateToTimestamp = ref({
  input: '',
  timezone: 'Asia/Shanghai',
  outputUnit: 's',
  results: []
})

// 复制当前时间戳
const copyCurrentTimestamp = () => {
  copyText(displayCurrentTimestamp.value.toString(), '时间戳')
}

// 切换时间戳单位
const toggleTimestampUnit = () => {
  currentTimestampUnit.value = currentTimestampUnit.value === 'ms' ? 's' : 'ms'
  ElMessage.success(`已切换为${currentTimestampUnit.value === 'ms' ? '毫秒' : '秒'}`)
}

// 切换定时器
const toggleTimer = () => {
  if (isTimerRunning.value) {
    // 停止定时器
    if (timer) {
      clearInterval(timer)
      timer = null
    }
    isTimerRunning.value = false
    ElMessage.success('已停止更新')
  } else {
    // 启动定时器
    timer = setInterval(() => {
      currentTimestamp.value = Date.now()
    }, 1000)
    isTimerRunning.value = true
    ElMessage.success('已开始更新')
  }
}

// 复制到剪贴板
const copyToClipboard = (text) => {
  if (!text) {
    ElMessage.warning('没有可复制的内容')
    return
  }
  copyText(text, '内容')
}

// 显示快捷时间选择对话框
const showQuickTimeDialog = (type) => {
  pendingQuickType.value = type
  showQuickDialog.value = true
}

// 确认快捷时间选择
const confirmQuickTime = (timeType) => {
  showQuickDialog.value = false
  setQuickTime(pendingQuickType.value, timeType)
}

// 快捷时间设置
const setQuickTime = (type, timeType = 'exact') => {
  const now = new Date()
  let targetTime

  switch (type) {
    case '30m':
      targetTime = new Date(now.getTime() - 30 * 60 * 1000)
      break
    case '1h':
      targetTime = new Date(now.getTime() - 1 * 60 * 60 * 1000)
      break
    case '6h':
      targetTime = new Date(now.getTime() - 6 * 60 * 60 * 1000)
      break
    case '12h':
      targetTime = new Date(now.getTime() - 12 * 60 * 60 * 1000)
      break
    case '1d':
      targetTime = new Date(now.getTime() - 1 * 24 * 60 * 60 * 1000)
      break
    case '3d':
      targetTime = new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000)
      break
    default:
      targetTime = now
  }

  // 如果选择整点时间，将分钟和秒设为0
  if (timeType === 'hour') {
    targetTime.setMinutes(0, 0, 0)
  }

  const timestamp = targetTime.getTime()

  // 格式化日期时间字符串
  const year = targetTime.getFullYear()
  const month = String(targetTime.getMonth() + 1).padStart(2, '0')
  const day = String(targetTime.getDate()).padStart(2, '0')
  const hours = String(targetTime.getHours()).padStart(2, '0')
  const minutes = String(targetTime.getMinutes()).padStart(2, '0')
  const seconds = String(targetTime.getSeconds()).padStart(2, '0')
  const dateTimeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`

  // 1. 填充时间戳输入框
  timestampToDate.value.input = timestamp.toString()

  // 2. 填充时间戳转日期结果框
  timestampToDate.value.result = dateTimeStr

  // 3. 填充日期时间输入框
  dateToTimestamp.value.datetime = dateTimeStr

  // 4. 填充日期转时间戳结果框（根据输出单位）
  const resultTimestamp = dateToTimestamp.value.outputUnit === 'ms'
    ? timestamp
    : Math.floor(timestamp / 1000)
  dateToTimestamp.value.result = resultTimestamp.toString()
  
  ElMessage.success(timeType === 'hour' ? '已设置为整点时间' : '已设置时间')
}

// 清空时间戳转日期
const clearTimestampToDate = () => {
  timestampToDate.value.input = ''
  timestampToDate.value.result = ''
  ElMessage.success('已清空')
}

// 清空日期转时间戳
const clearDateToTimestamp = () => {
  // 恢复为当前时间
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  
  dateToTimestamp.value.datetime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  dateToTimestamp.value.result = ''
  ElMessage.success('已恢复为当前时间')
}

// 时间戳转日期
const convertTimestampToDate = () => {
  if (!timestampToDate.value.input) {
    ElMessage.warning('请输入时间戳')
    return
  }
  
  try {
    let ts = parseInt(timestampToDate.value.input)
    if (isNaN(ts)) {
      ElMessage.error('请输入有效的时间戳')
      return
    }
    
    if (timestampToDate.value.unit === 's') {
      ts = ts * 1000
    }
    
    const date = new Date(ts)
    
    // 格式化输出
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    
    timestampToDate.value.result = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    
    ElMessage.success('转换成功')
  } catch (error) {
    ElMessage.error('转换失败，请检查输入的时间戳格式')
  }
}

// 日期转时间戳
const convertDateToTimestamp = () => {
  if (!dateToTimestamp.value.datetime) {
    ElMessage.warning('请选择日期时间')
    return
  }
  
  try {
    const date = new Date(dateToTimestamp.value.datetime)
    let timestamp = date.getTime()
    
    if (isNaN(timestamp)) {
      ElMessage.error('日期时间格式不正确')
      return
    }
    
    if (dateToTimestamp.value.outputUnit === 's') {
      timestamp = Math.floor(timestamp / 1000)
    }
    
    dateToTimestamp.value.result = timestamp.toString()
    ElMessage.success('转换成功')
  } catch (error) {
    ElMessage.error('转换失败，请检查输入的日期时间')
  }
}

// 批量时间戳转日期
const batchConvertTimestampToDate = () => {
  if (!batchTimestampToDate.value.input.trim()) {
    ElMessage.warning('请输入时间戳列表')
    return
  }

  // 支持三种格式：换行分隔、逗号分隔、混合分隔
  const input = batchTimestampToDate.value.input
  // 先按换行分割，再按逗号分割，最后过滤空值
  const timestamps = input
    .split(/[\n,]/)
    .map(item => item.trim())
    .filter(item => item)

  const results = []

  timestamps.forEach(timestamp => {
    try {
      let ts = parseInt(timestamp)
      if (isNaN(ts)) {
        results.push({ input: timestamp, output: '无效的时间戳' })
        return
      }

      // 如果是秒，转换为毫秒
      if (batchTimestampToDate.value.unit === 's') {
        ts = ts * 1000
      }

      const date = new Date(ts)
      if (isNaN(date.getTime())) {
        results.push({ input: timestamp, output: '无效的时间戳' })
        return
      }

      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')

      const output = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      results.push({ input: timestamp, output })
    } catch (error) {
      results.push({ input: timestamp, output: '转换失败' })
    }
  })

  batchTimestampToDate.value.results = results
  ElMessage.success(`成功转换 ${results.length} 条记录`)
}

// 批量日期转时间戳
const batchConvertDateToTimestamp = () => {
  if (!batchDateToTimestamp.value.input.trim()) {
    ElMessage.warning('请输入日期时间列表')
    return
  }

  // 支持三种格式：换行分隔、逗号分隔、混合分隔
  const input = batchDateToTimestamp.value.input
  // 先按换行分割，再按逗号分割，最后过滤空值
  const datetimes = input
    .split(/[\n,]/)
    .map(item => item.trim())
    .filter(item => item)

  const results = []

  datetimes.forEach(datetime => {
    try {
      const date = new Date(datetime)
      if (isNaN(date.getTime())) {
        results.push({ input: datetime, output: '无效的日期时间' })
        return
      }

      const timestamp = date.getTime()
      const output = batchDateToTimestamp.value.outputUnit === 'ms'
        ? timestamp.toString()
        : Math.floor(timestamp / 1000).toString()

      results.push({ input: datetime, output })
    } catch (error) {
      results.push({ input: datetime, output: '转换失败' })
    }
  })

  batchDateToTimestamp.value.results = results
  ElMessage.success(`成功转换 ${results.length} 条记录`)
}

// 复制批量转换结果
const copyBatchResults = (results, type) => {
  if (!results || results.length === 0) {
    ElMessage.warning('没有可复制的结果')
    return
  }

  let text = ''
  if (type === 'output') {
    // 只复制输出列，每行一个
    text = results.map(item => item.output).join('\n')
  } else if (type === 'both') {
    // 复制输入和输出，格式：输入 -> 输出
    text = results.map(item => `${item.input} -> ${item.output}`).join('\n')
  }

  copyToClipboard(text)
}

// 组件挂载
onMounted(() => {
  // 启动定时器
  timer = setInterval(() => {
    currentTimestamp.value = Date.now()
  }, 1000)
  
  // 初始化日期时间为当前时间
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  
  dateToTimestamp.value.datetime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
})

// 组件卸载
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.timestamp-converter-container {
  padding: 0;
  min-height: calc(100vh - 60px);
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.title-with-back {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.blue-return-button {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.blue-return-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  background: linear-gradient(135deg, #66b3ff 0%, #409eff 100%);
}

.title-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 28px;
  color: #409eff;
}

.title-content h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 14px;
  margin: 8px 0 0 0;
  padding: 8px 12px;
  background: #f0f9ff;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.page-description .el-icon {
  color: #409eff;
  font-size: 16px;
}

/* 当前时间戳区域 */
/* 当前时间戳卡片 */
.current-timestamp-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #e8f4ff;
  transition: all 0.3s ease;
}

.current-timestamp-card:hover {
  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.current-timestamp-section {
  padding: 5px 0;
}

.timestamp-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timestamp-display {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.timestamp-value {
  font-size: 28px;
  font-weight: 700;
  color: #409eff;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 1px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.timestamp-unit {
  font-size: 13px;
  color: #909399;
  font-weight: 500;
  padding: 4px 10px;
  background: #f0f9ff;
  border-radius: 12px;
  border: 1px solid #d9ecff;
}

/* 当前时间戳区域的按钮样式 */
.timestamp-display .el-button {
  border-radius: 18px;
  padding: 8px 18px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.timestamp-display .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.25);
}

.timestamp-display .el-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.timestamp-display .el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  border: none;
}

.timestamp-display .el-button--success {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
}

.timestamp-display .el-button--success:hover {
  background: linear-gradient(135deg, #85ce61 0%, #67c23a 100%);
}

.timestamp-display .el-button--danger {
  background: linear-gradient(135deg, #f56c6c 0%, #f89898 100%);
  border: none;
}

.timestamp-display .el-button--danger:hover {
  background: linear-gradient(135deg, #f89898 0%, #f56c6c 100%);
}

/* 转换卡片 */
.converter-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.converter-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.converter-section {
  padding: 20px;
}

.converter-card:not(.batch-converter-card) .converter-section {
  border-bottom: 1px solid #e4e7ed;
}

.converter-card:not(.batch-converter-card) .converter-section:last-child {
  border-bottom: none;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f9ff;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #409eff 0%, #66b3ff 100%);
}

.section-title .el-icon {
  font-size: 20px;
  color: #409eff;
  transition: transform 0.3s ease;
}

.section-title:hover .el-icon {
  transform: rotate(360deg);
}

.converter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 转换按钮样式优化 */
.converter-row .el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  border: none;
  border-radius: 20px;
  padding: 10px 24px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.converter-row .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
  background: linear-gradient(135deg, #66b3ff 0%, #409eff 100%);
}

.converter-row .el-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

/* 输入框样式优化 */
.converter-row .el-input {
  transition: all 0.3s ease;
}

.converter-row .el-input:hover :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #409eff inset;
}

.converter-row .el-input :deep(.el-input__wrapper) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.converter-row .el-input :deep(.el-input__wrapper):focus-within {
  box-shadow: 0 0 0 1px #409eff inset, 0 4px 12px rgba(64, 158, 255, 0.15);
}

/* 选择框样式优化 */
.converter-row .el-select :deep(.el-input__wrapper) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.converter-row .el-select:hover :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #409eff inset;
}

/* 快捷选择按钮 */
.quick-select-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-select-buttons .el-button {
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid #d9ecff;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  color: #409eff;
  position: relative;
  overflow: hidden;
}

.quick-select-buttons .el-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(64, 158, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.quick-select-buttons .el-button:hover::before {
  left: 100%;
}

.quick-select-buttons .el-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.3);
  border-color: #409eff;
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  color: white;
}

.quick-select-buttons .el-button:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

/* 批量转换容器 */
.batch-converters-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

/* 批量转换卡片 */
.batch-converter-card {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
  border: 1px solid #e8f4ff;
  transition: all 0.3s ease;
}

.batch-converter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.12);
  border-color: #d9ecff;
}

.batch-converter-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.batch-input-section,
.batch-result-section {
  width: 100%;
}

.batch-label {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 8px;
}

.batch-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 批量转换按钮样式 */
.batch-controls .el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  border: none;
  border-radius: 20px;
  padding: 10px 24px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.batch-controls .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
  background: linear-gradient(135deg, #66b3ff 0%, #409eff 100%);
}

.batch-controls .el-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

/* 批量结果操作按钮样式 */
.batch-result-actions .el-button {
  border-radius: 16px;
  transition: all 0.3s ease;
  font-weight: 500;
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
  color: white;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.25);
}

.batch-result-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.35);
  background: linear-gradient(135deg, #85ce61 0%, #67c23a 100%);
}

.batch-result-actions .el-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(103, 194, 58, 0.2);
}

/* 独立的复制按钮样式 */
.converter-row .el-button--success {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
  color: white;
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
  transition: all 0.3s ease;
}

.converter-row .el-button--success:hover {
  background: linear-gradient(135deg, #85ce61 0%, #67c23a 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.4);
}

.converter-row .el-button--success:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(103, 194, 58, 0.2);
}

/* 独立的清空按钮样式 */
.converter-row .el-button--danger {
  background: linear-gradient(135deg, #f56c6c 0%, #f89898 100%);
  border: none;
  color: white;
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
  transition: all 0.3s ease;
}

.converter-row .el-button--danger:hover {
  background: linear-gradient(135deg, #f89898 0%, #f56c6c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
}

.converter-row .el-button--danger:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(245, 108, 108, 0.2);
}

.batch-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.batch-result-actions {
  display: flex;
  gap: 8px;
}

/* 表格单元格可点击样式 */
.table-cell-clickable {
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.table-cell-clickable::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(64, 158, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.table-cell-clickable:hover::before {
  width: 200%;
  height: 200%;
}

.table-cell-clickable:hover {
  background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
  color: #409eff;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
  font-weight: 500;
}

.table-cell-clickable:active {
  background-color: #d9ecff;
  transform: translateX(2px);
  box-shadow: 0 1px 4px rgba(64, 158, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .converter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .converter-row > * {
    width: 100% !important;
  }
  
  /* 批量转换在中等屏幕上变为垂直排列 */
  .batch-converters-container {
    flex-direction: column;
  }
  
  .batch-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .batch-controls > * {
    width: 100% !important;
  }

  .batch-result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .batch-result-actions {
    width: 100%;
  }

  .batch-result-actions .el-button {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .timestamp-value {
    font-size: 18px;
  }
  
  .page-header {
    padding: 16px;
  }
  
  .title-main h2 {
    font-size: 20px;
  }
  
  .timestamp-display {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

